<template>
  <div class="nav_header">
    <div class="centre">
      <div class="nav_centre">
<<<<<<< HEAD
        <router-link to="index" tag="div" class="huize_logo">
          <img src="@/assets/img/21212.png" alt="慧择云志愿" />
        </router-link>
        <div class="huize_nav">
          <ul>
            <li class="cartoon">
              <router-link to="/film" tag="div">首页</router-link>
            </li>
            <li class="cartoon">
              <router-link to="/volunteer" tag="div">填志愿</router-link>
            </li>

            <li class="cartoon">
              <router-link to="/Advisory" tag="div">资讯</router-link>
            </li>
            <!-- <li class="cartoon">
              <router-link to="/film" tag="div">新高考</router-link>
            </li>-->
            <li class="cartoon" v-show="VIP !=  3">
              <router-link to="/MyMember/Member/3" tag="div">专家一对一</router-link>
            </li>
          </ul>
        </div>
        <div>
          <!-- <i class="iconfont">&#xe751;</i> -->
        </div>
      </div>
      <!-- <div class="huize_zy">
        <div class="zy_left" v-if="tyle == 0">
=======
        
            <router-link to="index" tag="div"  class="huize_logo">
            <img src="@/assets/img/21212.png" alt="慧择云志愿" />
          
          </router-link>
        <div class="huize_nav">
          <ul>
            <router-link to="/film" tag="li" >首页</router-link>
            <router-link to="/volunteer" tag="li" >填志愿</router-link>
            <router-link to="/Advisory" tag="li" >资讯</router-link>
            <router-link to="/film" tag="li" >新高考</router-link>
            <router-link to="/film" tag="li" >专家一对一</router-link>
            
          </ul>
        </div>
        <div>
          <i class="iconfont">&#xe751;</i>
        </div>
      </div>
      <div class="huize_zy">
        <div class="zy_left"  v-if="tyle == 0">
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <div class="alternative_from">
            <h3>模拟填报志愿</h3>
            <div class="from">
              <el-form ref="form" :model="form" label-width="100px">
<<<<<<< HEAD
                <div class="form_list">
                  <span>高考省份</span>
                  <el-select v-model="form.region" placeholder="所在高考省份">
=======
                <div  class="form_list">
                    <span>高考省份</span>
                <el-select v-model="form.region" placeholder="所在高考省份">
>>>>>>> 314b442cce11d658746227581b0160373004c345
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </div>
<<<<<<< HEAD
                <div class="form_list">
                  <span>高考省份</span>
                  <el-select v-model="form.region1" placeholder="所在高考年份">
                    <el-option label="区域一" value="shanghai"></el-option>
                  </el-select>
                </div>
                <div class="form_list"></div>
=======
                <div  class="form_list">
                    <span>高考省份</span>
                <el-select v-model="form.region1" placeholder="所在高考年份">
                    <el-option label="区域一" value="shanghai"></el-option>
                  
                  

                  </el-select>
                </div>
                <div  class="form_list">

                </div>
>>>>>>> 314b442cce11d658746227581b0160373004c345
                <div class="form_list">
                  <span>选择科目</span>
                  <el-radio-group v-model="form.resource">
                    <el-radio label="理科"></el-radio>
                    <el-radio label="文科"></el-radio>
                    <el-radio label="综合"></el-radio>
                  </el-radio-group>
                </div>
                <div class="form_list">
                  <span>预估分数</span>

                  <el-input v-model="input" placeholder="预估分数"></el-input>
                </div>
                <div class="form_list">
                  <span>预估分数</span>

                  <el-input v-model="input1" placeholder="预估排名"></el-input>
                </div>
              </el-form>
            </div>
            <el-button type="primary">模拟填报</el-button>
          </div>
<<<<<<< HEAD
         
        </div>
        <div class="zy_left" v-if="tyle == 1">
=======
          <!-- <div class="volunteer_form">

          </div>-->
        </div>
        <div class="zy_left"  v-if="tyle == 1">
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <div class="alternative_from">
            <h3>备考志愿</h3>
            <div class="from">
              <el-form ref="form" :model="form" label-width="100px">
<<<<<<< HEAD
                <div class="form_list">
                  <span>高考省份</span>
                  <el-select v-model="form.region" placeholder="所在高考省份">
=======
                <div  class="form_list">
                    <span>高考省份</span>
                <el-select v-model="form.region" placeholder="所在高考省份">
>>>>>>> 314b442cce11d658746227581b0160373004c345
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </div>
<<<<<<< HEAD
                <div class="form_list">
                  <span>高考省份</span>
                  <el-select v-model="form.region1" placeholder="所在高考年份">
                    <el-option label="区域一" value="shanghai"></el-option>
                  </el-select>
                </div>
                <div class="form_list"></div>
=======
                <div  class="form_list">
                    <span>高考省份</span>
                <el-select v-model="form.region1" placeholder="所在高考年份">
                    <el-option label="区域一" value="shanghai"></el-option>
                  
                  

                  </el-select>
                </div>
                <div  class="form_list">

                </div>
>>>>>>> 314b442cce11d658746227581b0160373004c345
                <div class="form_list">
                  <span>选择科目</span>
                  <el-radio-group v-model="form.resource">
                    <el-radio label="理科"></el-radio>
                    <el-radio label="文科"></el-radio>
                    <el-radio label="综合"></el-radio>
                  </el-radio-group>
                </div>
                <div class="form_list">
                  <span>预估分数</span>

                  <el-input v-model="input" placeholder="预估分数"></el-input>
                </div>
                <div class="form_list">
                  <span>预估分数</span>

                  <el-input v-model="input1" placeholder="预估排名"></el-input>
                </div>
              </el-form>
            </div>
            <el-button type="primary">模拟填报</el-button>
          </div>
<<<<<<< HEAD
         
        </div>
        <div v-if="tyle == 2"></div>
=======
          <!-- <div class="volunteer_form">

          </div>-->
        </div>
        <div v-if="tyle == 2">

        </div>
>>>>>>> 314b442cce11d658746227581b0160373004c345
        <div class="zy_right">
          <div class="alternative" @click="opneAlternative">
            <i class="iconfont">&#xe60a;</i>
            <span>备选志愿</span>
          </div>
          <div class="/volunteer" @click="opneVolunteer">
            <i class="iconfont">&#xe686;</i>
            <span>志愿表</span>
          </div>
        </div>
<<<<<<< HEAD
      </div>-->
=======
      </div>
>>>>>>> 314b442cce11d658746227581b0160373004c345
    </div>
  </div>
</template>
<script>
export default {
  name: "Header",

  data() {
<<<<<<< HEAD
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    var vip = userInfo.userEntity.vip;
    return {
      input: "",
      input1: "",
      tyle: "2",
      VIP: vip,
      form: {
        resource: "",
        region: "",
        region1: ""
=======
    return {
      input: "",
      input1: "",
      tyle : "2",
      form: {
        resource: "",
        region: '',
     region1: ''
>>>>>>> 314b442cce11d658746227581b0160373004c345
      }
    };
  },
  methods: {
<<<<<<< HEAD
    opneAlternative() {
      this.tyle = "1";
    },
    opneVolunteer() {
      this.tyle = "0";
    },
=======
      opneAlternative(){
          this.tyle = "1";
      },
      opneVolunteer(){
          this.tyle = "0";
      },
>>>>>>> 314b442cce11d658746227581b0160373004c345
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style lang="scss" scoped>
<<<<<<< HEAD
=======

>>>>>>> 314b442cce11d658746227581b0160373004c345
.nav_header {
  width: 100%;

  .centre {
    position: relative;
  }
  .nav_centre {
    height: 68px;
    line-height: 68px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    .huize_logo {
      display: flex;
      align-content: center;

      img {
        height: 36px;
        margin-top: 16px;
      }
    }
    .iconfont {
      font-size: 24px;
    }
  }

  .huize_nav {
    height: 100%;
    ul {
      display: flex;
      justify-content: space-between;
<<<<<<< HEAD
      .router-link-active {
        color: #414141;
      }
      li {
        cursor: pointer;
        font-size: 16px;

        position: relative;
        display: block;

        overflow: hidden;

        div {
          position: relative;
          z-index: 1;
          text-align: center;
          padding: 0 20px;
          height: 200px;
        }
        div:hover {
          height: 100%;
          color: #fff;
          background-color: transparent;
          color: #ffffff !important;
        }
      }
    }
  }
  .cartoon::before {
    border-radius: 50%;
    position: absolute;
    background: #2e71f7;
    content: "";
    display: block;
    margin: auto;
    height: 54px;
    width: 100%;
    left: 0;
    right: 0;
    opacity: 0;
  }

  .cartoon:hover::before {
    animation: in 0.6s forwards;
    -webkit-animation: in 0.6s forwards;
    -moz-animation: in 0.6s forwards;
    -ms-animation: in 0.6s forwards;
    -o-animation: in 0.6s forwards;
  }

  @keyframes in {
    0% {
      transform: scale(0);
      opacity: 1;
      border-radius: 50%;
    }
    80% {
      transform: scale(2);
      opacity: 1;
      border-radius: 30%;
    }
    100% {
      border-radius: 0;
      opacity: 1;
      transform: scale(2);
    }
  }

  @-webkit-keyframes in {
    0% {
      transform: scale(0);
      opacity: 1;
      border-radius: 50%;
    }
    80% {
      transform: scale(2);
      opacity: 1;
      border-radius: 30%;
    }
    100% {
      border-radius: 0;
      opacity: 1;
      transform: scale(2);
    }
  }

  @-moz-keyframes in {
    0% {
      transform: scale(0);
      opacity: 1;
      border-radius: 50%;
    }
    80% {
      transform: scale(2);
      opacity: 1;
      border-radius: 30%;
    }
    100% {
      border-radius: 0;
      opacity: 1;
      transform: scale(2);
    }
  }

  @-ms-keyframes in {
    0% {
      transform: scale(0);
      opacity: 1;
      border-radius: 50%;
    }
    80% {
      transform: scale(2);
      opacity: 1;
      border-radius: 30%;
    }
    100% {
      border-radius: 0;
      opacity: 1;
      transform: scale(2);
    }
  }

  @-o-keyframes in {
    0% {
      transform: scale(0);
      opacity: 1;
      border-radius: 50%;
    }
    80% {
      transform: scale(2);
      opacity: 1;
      border-radius: 30%;
    }
    100% {
      border-radius: 0;
      opacity: 1;
      transform: scale(2);
    }
  }
=======
     .router-link-active{
 color: #414141;
} 
      li {
        cursor:pointer;
        color: #959595;

        padding: 0 35px;
      }
    }
  }
>>>>>>> 314b442cce11d658746227581b0160373004c345

  .huize_zy {
    position: absolute;
    width: 484px;
    height: 560px;

    z-index: 10;
    right: 0;
    top: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    .zy_left {
<<<<<<< HEAD
      > div {
=======
     
      
      >div {
>>>>>>> 314b442cce11d658746227581b0160373004c345
        width: 360px;
        height: 500px;
        background: #ffffff;
        border-radius: 10px;
        padding-left: 34px;
        padding-top: 18px;
        h3 {
          display: block;
          font-size: 22px;
          color: #515151;

          line-height: 100px;
        }
        .from {
          .form_list {
            margin-bottom: 26px;
<<<<<<< HEAD

=======
           
>>>>>>> 314b442cce11d658746227581b0160373004c345
            span {
              width: 100px;
              font-size: 18px;
              color: #414141;
              margin-right: 50px;
            }
<<<<<<< HEAD
            .el-select {
              width: 160px;
              .el-input {
                width: 100px;
              }
            }
            .el-input {
=======
            .el-select{
                 width: 160px;
                .el-input {
              width: 100px;
            }
            }
             .el-input {
>>>>>>> 314b442cce11d658746227581b0160373004c345
              width: 100px;
            }
          }
        }

        .el-radio {
          margin-right: 10px;
        }

        button {
          width: 90%;
        }
      }
    }
    .zy_right {
      div {
        padding: 12px 0;
        width: 68px;
        background: #2e86ff;
        color: #fff;
        border-radius: 7px;
        display: flex;
        align-content: center;
        flex-direction: column;
        text-align: center;
        margin: 20px 0;
        i {
          margin-bottom: 12px;
          font-size: 20px;
          color: #fff;
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>